var schdata =[];
$(document).on("pagebeforecreate","#customers-list-page", function(e) {
	//alert('product-list-page');
	console.log("Ready to bring the awesome.");
	var customerListView = $("#customerList");
	
	$("#customers-search").on("input", function(e) {
		//alert('2');
        var text = $(this).val();
        if(text.length < 2) {
        	customerListView.html("");
        	customerListView.listview("refresh");
        } else {
            $.getJSON('inquiryCustomers.html?st='+text, function(data) {
            	schdata = data;
            	//alert(schdata);
            	var items = [];
              $.each(data, function(key, val) {
            	items.push('<li><a href="#" id="' + key + '" data-transition="slide" class="info-go"><h2>' + val.customerName + '</h2><p>'+val.addressName+'</p></a></li>');
              });
           	  
           	  customerListView.html(items.join('')).promise().done(function () {
           		customerListView.listview("refresh");
                //wait for append to finish - thats why you use a promise()
                //done() will run after append is done
                //add the click event for the redirection to happen to #details-page
                $(this).on("click", ".info-go", function (e) {

                    e.preventDefault();
                    //store the information in the next page's data
                    //alert(schdata[this.id]);
                    $("#customer-info-page").data("schdata", schdata[this.id]);
                    //change the page # to second page. 
                    //Now the URL in the address bar will read index.html#details-page
                    //where #details-page is the "id" of the second page
                    //we're gonna redirect to that now using changePage() method
                    $.mobile.changePage("#customer-info-page");
                });
              });
          });
        }
    });
});


$(document).on("pagebeforeshow", "#customer-info-page", function () {
	//alert('product-info-page');
    var info = $(this).data("schdata");
    var info_view = [];

    info_view.push('<div id="custom-detail-block">');
        
    info_view.push(' <div class="ui-field-contain">');
    info_view.push(' <label for="">Name</label>');
    info_view.push(' <div class="text-block">'+info['customerName']+'</div>');
    info_view.push('</div>');
        
    info_view.push(' <div class="ui-field-contain">');
    info_view.push(' <label for="">BP Group</label>');
    info_view.push(' <div class="text-block">'+info['group']+'</div>');
    info_view.push('</div>');
        
    info_view.push(' <div class="ui-field-contain">');
    info_view.push(' <label for="">Payment Term</label>');
    info_view.push(' <div class="text-block">'+info['paymentTerm']+'</div>');
    info_view.push('</div>');
        
    info_view.push(' <div class="ui-field-contain">');
    info_view.push(' <label for="">Price list</label>');
    info_view.push(' <div class="text-block">'+ info['pricelist']+'</div>');
    info_view.push('</div>');
    
    info_view.push(' <hr />');
    
    info_view.push(' <div class="ui-field-contain">');
    info_view.push(' <label for="">Address</label>');
    info_view.push(' <div class="text-block">'+ info['fullAddress']+'</div>');
    info_view.push('</div>');
        
    info_view.push('</div>');
    //add this to html
    $(this).find("[data-role=content]").html(info_view.join(''));
});